<template>

    <div style=" width: 100% ;padding: 15px 0;">
        <h1 style=" color: black;font-weight: bold ">备注</h1>
    </div>
    <div v-for="(comment, index) in remarks" :key="index" class="pading comment-item"
        @mouseover="comment.showOptions = true" @mouseleave="comment.showOptions = false">
        <img :src="getImageUrl() + comment.avatar" alt="avatar" class="avatar" />
        <div class="comment-details">
            <div class="comment-header">
                <span class="username">{{ comment.userName }}</span>
                <span class="time">{{ comment.createTime }}</span>
            </div>
            <p class="content1">{{ comment.noteContent }}</p>
        </div>


        <!-- 删除和修改按钮 -->
        <div class="comment-options" v-if="comment.showOptions">
            <el-button class="delete-btn" @click="deleteComment(comment, index)">删除</el-button>
            <el-button class="edit-btn" @click="editComment(comment)">修改</el-button>
        </div>
    </div>

    <el-form :model="desc" label-width="auto" style="background-color: rgb(230, 230, 230); width: 100%; height: 120px;">
        <el-input v-model="desc" type="textarea" placeholder="请添加备注" class="input"
        @focus="showOptions = true" />
        <el-form-item class="button" v-if="showOptions">
            <el-button @click="showOptions = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup>
import { ElButton, ElMessageBox } from 'element-plus'; // 引入 Element UI 按钮
import requestUtil, { getImageUrl } from "@/util/request";
import { defineEmits, defineProps, ref, watch } from "vue" //引入Vue 3 Composition API


// 定义值
const showOptions = ref(false)
const desc = ref('')

// 这里使用 Composition API
//父组件传递的数据
const props = defineProps(
    {
        remarks: {
            type: Array,
            default: [
                {
                    "id": "9341d20f577c4eab8d4291466f601d14",
                    "noteContent": "852011",
                    "createBy": null,
                    "createTime": "2025-01-02 17:00:31",
                    "userName": "admin",
                    "avatar": "20241213040703000000003.jpg",
                    "clueId": "3834e9aea93f41879ec0ed1b11e76559",
                    "showOptions": false,
                }
            ],
            required: true
        },

    }
)
const emits = defineEmits(['deleteComment', 'editComment', 'onSubmit'])

// 删除评论
const deleteComment = (comment, index) => {

    ElMessageBox.confirm(
        '确认删除数据么?',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    ).then(() => {
        // 在此处执行删除逻辑
        emits('deleteComment', comment);
    }).catch(() => {
    })


};

// 编辑评论
const editComment = (comment) => {
    ElMessageBox.prompt('请输入你修改的内容', '修改评论', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        inputType: 'textarea',
        inputValue: comment.noteContent
    }).then(async ({ value }) => {
        comment.noteContent = value;
        // 在此处执行编辑逻辑
        emits('editComment', comment);
    }).catch(() => {

    })
};

//添加评论
const onSubmit = () => {
    emits('onSubmit', desc.value)
}


</script>

<style scoped>
.comment-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.comment-details {
    flex: 1;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.username {
    font-weight: bold;
    color: #333;
}

.time {
    font-size: 12px;
    color: #999;
}

.content1 {
    margin: 0;
    font-size: 14px;
    color: #555;
}

.comment-options {
    padding-top: 20px;
    gap: 10px;
}

.comment-options button {
    color: white;
    border: none;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
    transition: background-color 0.3s;
}


.edit-btn {
    background-color: hsl(234, 69%, 47%);
}

.delete-btn {
    background-color: #8c0823;
}

.comment-item:hover .comment-options {
    display: flex;
    /* 显示按钮 */
}

.comment-options {
    display: none;
    /* 默认隐藏按钮 */
}

.input {
    padding: 10px 0;
    width: 98%;
    margin-left: 10px;
}

.button {
    padding: 5px 0;
    margin-left: 82%;

}
</style>